<template>
  <el-dialog title="中间产品检索" :visible.sync="dialogVisible" width="60%" @open="handleOpenDialog">
    <div class="searchDiv">
      <el-input v-model="identification" placeholder="请输入中间产品编码" size="mini" style="width:100%;" class="search">
        <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
      </el-input>
    </div>
    <div v-loading="listLoading">
      <el-table
        ref="midProductTable"
        :data="list"
        border
        height="300"
        style="width: 100%;"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column type="index" label="编号" align="center" width="50" />
        <el-table-column label="编码" align="center" min-width="150">
          <template slot-scope="{row}">
            {{ row.identification }}
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center" min-width="150">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" min-width="150">
          <template slot-scope="{row}">
            <span>{{ row.type }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSelectFinished()">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 初始化数据
const initList = [
  { id: '1', // id
    identification: 'A100Q', // 编码
    name: 'nA100Q区域', // 名称
    type: '区域' // 类型
  },
  { id: '2', // i文件父id
    identification: 'AB01C', // 编码
    name: 'AB01C分段', // 名称
    type: '分段' // 类型
  },
  { id: '3', // id
    identification: 'CZ11T', // 编码
    name: 'CZ11T总段', // 名称
    type: '总段' // 类型
  }
]
export default {
  name: '',
  data() {
    return {
      dialogVisible: false,
      list: [],
      right: 'right',
      identification: '',
      currentRow: '',
      currentList: [], // 记录当前界面列表数据
      listLoading: false// 加载遮盖层
    }
  },
  methods: {
    // 当前文件界面根据关键字筛选数据
    currentSearchList() {
      this.currentList = initList
      return this.currentList
    },
    // 查询
    handleSearch() {
      this.listLoading = true
      setTimeout(() => {
        this.list = this.currentSearchList()
        this.listLoading = false
      }, 1000)
    },
    // 确认
    handleSelectFinished() {
      if (this.list.length > 0) {
        this.$emit('handleMidProductSelected', this.currentRow)
        this.$refs.midProductTable.setCurrentRow()
      }
      this.dialogVisible = false
    },
    // 弹窗打开时触发界面初始化数据
    handleOpenDialog() {
      this.identification = ''
      this.currentRow = ''
      this.handleMidProductList()
    },
    // 初始化列表
    handleMidProductList() {
      this.list = []
      this.currentList = []
    },
    // 主界面调用弹窗的的入口函数
    handleMidProductDialog() {
      this.dialogVisible = true
    },
    // 表格选中时触发的事件，记录当前选中数据
    handleCurrentChange(val) {
      this.currentRow = val
    }
  }
}
</script>
<style lang="stylus" scoped>
.searchDiv {
  margin-bottom: 10px;
  float: right;
}
</style>
